<template>
  <el-container class="allbody" onscroll="false">
    <el-header
      style="position: relative; height: 10.5%"
      class="headerbackgroud"
    >
      <div
        style="
          color: white;
          font-size: 30px;
          text-align: center;
          margin-top: 20px;
          margin-left: 70px;
        "
      >
        典型工业设备和产品检测监测云服务平台
      </div>
      <el-card
        style="
          width: 150px;
          height: 50px;
          text-align: left;
          margin-left: 80px;
          margin-top: -30px;
          border-radius: 30px;
          background-color: #7d93ea;
        "
      >
        <div style="color: white; margin-left: 6px; margin-top: -10px">
          中国特种设备检测研究院
        </div>
      </el-card>
      <el-card
        style="
          width: 126px;
          height: 60px;
          align-items: right;
          margin-left: 1600px;
          margin-top: -30px;
          border-radius: 30px;
          background-color: #7d93ea;
        "
      >
        <div style="color: white; margin-left: 2px; margin-top: -8px">
          {{ dateFormat(date) }}
        </div>
      </el-card>
    </el-header>
    <el-main
      style="
        position: relative;
        height: 100%;
        background-image: url('../../../assets/bg.jpg');
      "
      data="list"
    >
      <el-container style="height: 100%">
        <el-aside width="25%" class="frameDiv">
          <el-row style="height: 54%">
            <div class="frame">
              <div class="title">机电设备</div>
              <el-col class="panel-group">
                <el-col style="width: 100%; height: 50%">
                  <el-container style="margin-top: 5%">
                    <div class="card-panel">
                      <div
                        class="card-img"
                        :class="getEquActive('qzj')"
                        @click="changeEquType('qzj')"
                      >
                        <img
                          style="margin-top: 0%; margin-left: 25%"
                          src="../../../assets/image/起重机械.png"
                        />
                        <div class="card-img-inf">起重机械</div>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          设备数量
                          <count-to
                            :start-val="0"
                            :end-val="6026"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          台
                        </div>
                        <!--liftnum1-->
                        <div class="card-panel-text">
                          使用单位
                          <count-to
                            :start-val="0"
                            :end-val="453"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                        <div class="card-panel-text">
                          制造企业
                          <count-to
                            :start-val="0"
                            :end-val="399"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                      </div>
                    </div>
                  </el-container>
                </el-col>

                <el-col style="width: 100%; height: 50%">
                  <el-container style="margin-top: 10%">
                    <div class="card-panel">
                      <div
                        class="card-img"
                        :class="getEquActive('dqkg')"
                        @click="changeEquType('dqkg')"
                      >
                        <img
                          style="margin-top: 5%; margin-left: 25%"
                          src="../../../assets/image/电气控柜.png"
                        />
                        <div class="card-img-inf">电气控制柜</div>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          设备数量
                          <count-to
                            :start-val="0"
                            :end-val="30"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          台
                        </div>
                        <div class="card-panel-text">
                          使用单位
                          <count-to
                            :start-val="0"
                            :end-val="1"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                        <div class="card-panel-text">
                          制造企业
                          <!-- <count-to
                            :start-val="0"
                            end-val="--"
                            :duration="3000"
                            class="card-panel-num"
                          /> -->
                          <span style="color:#4AB7BD">--</span>
                          家
                        </div>
                      </div>
                    </div>
                  </el-container>
                </el-col>
              </el-col>
            </div>
          </el-row>
          >
          <el-row style="height: 31%">
            <div class="frame">
              <div class="title">储运设备</div>
              <el-col class="panel-group">
                <el-col style="width: 100%; height: 50%">
                  <el-container>
                    <div class="card-panel">
                      <div
                        class="card-img"
                        :class="getEquActive('yycg')"
                        @click="changeEquType('yycg')"
                      >
                        <img
                          style="margin-top: 5%; margin-left: 25%"
                          src="../../../assets/image/原油储罐.png"
                        />
                        <div class="card-img-inf">储罐</div>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          设备数量
                          <count-to
                            :start-val="0"
                            :end-val="152"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          台
                        </div>
                        <div class="card-panel-text">
                          使用单位
                          <count-to
                            :start-val="0"
                            :end-val="108"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                        <div class="card-panel-text">
                          制造企业
                          <count-to
                            :start-val="0"
                            :end-val="58"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                      </div>
                    </div>
                  </el-container>
                </el-col>

                <!--<el-col style="width: 100%;height: 50%">-->
                <!--<el-container >-->
                <!--<div class="card-panel">-->
                <!--<div style="border: #4AB7BD 3px solid;border-radius: 10px" class="card-img">-->
                <!--<img style="margin-top: 5%;margin-left: 25%" src="../../../assets/image/油气管道.png">-->
                <!--<div style="margin-left: 25%" class="card-img-inf">油气管道</div>-->
                <!--</div>-->
                <!--<div class="card-panel-description">-->
                <!--<div class="card-panel-text">-->
                <!--设备数量  <count-to :start-val="0" :end-val="0" :duration="3000" class="card-panel-num" />  台-->
                <!--</div>-->
                <!--<div class="card-panel-text">-->
                <!--使用单位  <count-to :start-val="0" :end-val="0" :duration="3000" class="card-panel-num" />  家-->
                <!--</div>-->
                <!--<div class="card-panel-text">-->
                <!--制造企业  <count-to :start-val="0" :end-val="0" :duration="3000" class="card-panel-num" />  家-->
                <!--</div>-->
                <!--</div>-->
                <!--</div>-->

                <!--</el-container>-->
                <!--</el-col>-->
              </el-col>
            </div>
          </el-row>
          >
        </el-aside>
        <el-main width="50%" style="z-index: 5">
          <el-row style="margin-top: 1%; width: 100%; height: 75%">
            <baidu-map
              id="allmap"
              ref="allmap"
              center="安徽省"
              :zoom="zoom"
              :scroll-wheel-zoom="true"
              :map-style="mapStyle"
              ak="tMKUDeTdNWyNefPuZ5vLWHLr4k540dl2"
              @click="getPoint"
            >
              <bm-view style="width: 100%; height: 100px; flex: 1"></bm-view>
              <bm-local-search
                :keyword="keyword"
                zoom="12.8"
                style="display: none"
              ></bm-local-search>
            </baidu-map>
          </el-row>

          <el-row style="width: 100%; height: 20%">
            <panel-group></panel-group>
          </el-row>
          >
        </el-main>
        <el-aside
          style="width: 25%; height: 100%; margin-left: 0px"
          class="frameDiv2"
          onscroll="false"
        >
          <el-row style="height: 90%">
            <div class="frame2">
              <div class="title2">承压设备</div>
              <el-row style="height: 100%; width: 100%" class="panel-group">
                <el-row style="height: 25%">
                  <el-container>
                    <div class="card-panel">
                      <div
                        class="card-img"
                        :class="getEquActive('jtt')"
                        @click="changeEquType('jtt')"
                      >
                        <img
                          style="margin-top: 5%; margin-left: 25%"
                          src="../../../assets/image/焦炭塔.png"
                        />
                        <div class="card-img-inf">焦炭塔</div>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          设备数量
                          <count-to
                            :start-val="0"
                            :end-val="cokenum1"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          台
                        </div>
                        <div class="card-panel-text">
                          使用单位
                          <count-to
                            :start-val="0"
                            :end-val="cokenum2"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                        <div class="card-panel-text">
                          制造企业
                          <count-to
                            :start-val="0"
                            :end-val="cokenum3"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                      </div>
                    </div>
                  </el-container>
                </el-row>
                <el-row style="height: 25%">
                  <el-container>
                    <div class="card-panel">
                      <div class="card-img" @click="openUrl()">
                        <img
                          style="margin-top: 5%; margin-left: 25%"
                          src="../../../assets/image/焦炭塔.png"
                        />
                        <div class="card-img-inf">氨合成塔</div>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          设备数量
                          <count-to
                            :start-val="0"
                            :end-val="1"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          台
                        </div>
                        <div class="card-panel-text">
                          使用单位
                          <count-to
                            :start-val="0"
                            :end-val="1"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                        <div class="card-panel-text">
                          制造企业
                          <count-to
                            :start-val="0"
                            :end-val="cokenum3"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                      </div>
                    </div>
                  </el-container>
                </el-row>

                <el-row style="height: 25%">
                  <el-container>
                    <div class="card-panel">
                      <div
                        class="card-img"
                        :class="getEquActive('dzgl')"
                        @click="changeEquType('dzgl')"
                      >
                        <img
                          style="margin-top: 5%; margin-left: 25%"
                          src="../../../assets/image/电站锅炉.png"
                        />
                        <div class="card-img-inf">锅炉</div>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          设备数量
                          <count-to
                            :start-val="0"
                            :end-val="281"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          台
                        </div>
                        <div class="card-panel-text">
                          使用单位
                          <count-to
                            :start-val="0"
                            :end-val="108"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                        <div class="card-panel-text">
                          制造企业
                          <count-to
                            :start-val="0"
                            :end-val="38"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                      </div>
                    </div>
                  </el-container>
                </el-row>

                <el-row style="height: 25%">
                  <el-container>
                    <div class="card-panel">
                      <div
                        class="card-img"
                        :class="getEquActive('ydqp')"
                        @click="changeEquType('ydqp')"
                      >
                        <img
                          style="margin-top: 5%; margin-left: 25%"
                          src="../../../assets/image/移动气瓶.png"
                        />
                        <div class="card-img-inf">气瓶</div>
                      </div>
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          设备数量
                          <count-to
                            :start-val="0"
                            :end-val="104441"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          台
                        </div>
                        <div class="card-panel-text">
                          使用单位
                          <count-to
                            :start-val="0"
                            :end-val="720"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                        <div class="card-panel-text">
                          制造企业
                          <count-to
                            :start-val="0"
                            :end-val="191"
                            :duration="3000"
                            class="card-panel-num"
                          />
                          家
                        </div>
                      </div>
                    </div>
                  </el-container>
                </el-row>
              </el-row>
            </div>
          </el-row>
        </el-aside>
      </el-container>
    </el-main>
    <div class="map1"><img src="../../../assets/image/lbx.png" /></div>
    <div class="map2"><img src="../../../assets/image/jt.png" /></div>
    <div class="map3"><img src="../../../assets/image/map.png" /></div>
    <vue-particles
      color="#0ff"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="3"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="false"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    />
    <!--#粒子特效组件-->
  </el-container>
</template>

<script>
import GithubCorner from "@/components/GithubCorner";
import PanelGroup from "./components/PanelGroup";
import LineChart from "./components/LineChart";
import RaddarChart from "./components/RaddarChart";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";
import TodoList from "./components/TodoList";
import BoxCard from "./components/BoxCard";
import cokeTower_map from "./components/cokeTower_map";
import HiddenTroubleStatisticsChart from "./components/HiddenTroubleStatisticsChart";
import temperature from "./components/monitor/temperature";
import strain from "./components/monitor/strain";
import slope from "./components/monitor/slope";
import vibration from "./components/monitor/vibration";
import PieChart2 from "./components/PieChart2";
//import imgUrl from '../../../assets/tower.png'
import backimgUrl from "../../../assets/screen-header.png";
import ElContainer from "element-ui/packages/container/src/main";
import ElAside from "element-ui/packages/aside/src/main";
import ElHeader from "element-ui/packages/header/src/main";
import ElMain from "element-ui/packages/main/src/main";
import LabelWrap from "element-ui/packages/form/src/label-wrap";

import echarts from "echarts";
import Vue from "vue";
import CountTo from "vue-count-to";
import { mapGetters, mapMutations } from "vuex";

import { get, get as userType, del, dels } from "@/api/sys/connSysAuthApi";
import { parseTime } from "@/utils";
import { req } from "@/api/base/BaseApi";

import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmScale from "vue-baidu-map/components/controls/Scale";
import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch";

import PerfectScrollbar from "perfect-scrollbar";
import vueSeamlessScroll from "vue-seamless-scroll";

// import { test } from "../../../router/index";
//对应的css
import "perfect-scrollbar/css/perfect-scrollbar.css";

Vue.prototype.$echarts = echarts;
const el_scrollBar = (el) => {
  //在元素上加点私货，名字随便取，确保不会和已有属性重复即可，我取名叫做_ps_
  if (el._ps_ instanceof PerfectScrollbar) {
    el._ps_.update();
  } else {
    //el上挂一份属性
    el._ps_ = new PerfectScrollbar(el, { suppressScrollX: true });
  }
};

export default {
  name: "DashboardAdmin",
  props: {
    title: String,
  },
  components: {
    LabelWrap,
    ElMain,
    ElHeader,
    ElAside,
    ElContainer,
    PieChart2,
    cokeTower_map,
    GithubCorner,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    HiddenTroubleStatisticsChart,
    BarChart,
    TodoList,
    BoxCard,
    temperature,
    slope,
    strain,
    vibration,
    BaiduMap,
    BmScale,
    BmNavigation,
    BmMarkerClusterer,
    BmMarker,
    BmInfoWindow,
    BmLocalSearch,
    vueSeamlessScroll,
    CountTo,
  },
  data() {
    return {
      imgUrl: null,
      backimgUrl: null,
      date: new Date(),
      keyword: "", //搜索框关键词
      zoom: 12.8, //放大比例
      //数量变量
      liftnum1: 0,
      liftnum2: 0,
      liftnum3: 0,
      gasnum1: 0,
      gasnum2: 0,
      gasnum3: 0,
      cokenum1: 0,
      cokenum2: 0,
      cokenum3: 0,
      options1: [
        {
          value: "安徽省",
          label: "安徽省",
        },
        {
          value: "辽宁省",
          label: "辽宁省",
        },
        {
          value: "广东省",
          label: "广东省",
        },
      ],
      location: "",
      options2: [
        {
          value: "铜陵市",
          label: "铜陵市",
        },
      ],
      city: "",
      options: [
        {
          value: "铜陵市特种设备检测研究所",
          label: "铜陵市特种设备检测研究所",
        },
      ],
      enterprises: "",
      list: [],
      mapStyle: {
        styleJson: [
          {
            featureType: "land",
            elementType: "geometry",
            stylers: {
              color: "#000532",
            },
          },
          {
            featureType: "building",
            elementType: "geometry",
            stylers: {
              color: "#0129e1",
            },
          },
          {
            featureType: "highway",
            elementType: "all",
            stylers: {
              lightness: -42,
              saturation: -91,
            },
          },
          {
            featureType: "arterial",
            elementType: "geometry",
            stylers: {
              lightness: -77,
              saturation: -94,
            },
          },
          {
            featureType: "green",
            elementType: "geometry",
            stylers: {
              color: "#2a4eeb",
            },
          },
          {
            featureType: "water",
            elementType: "geometry",
            stylers: {
              color: "#001b84",
            },
          },
          {
            featureType: "subway",
            elementType: "geometry.stroke",
            stylers: {
              color: "#002dd1",
            },
          },
          {
            featureType: "railway",
            elementType: "geometry",
            stylers: {
              lightness: -52,
            },
          },
          {
            featureType: "all",
            elementType: "labels.text.stroke",
            stylers: {
              color: "#313131",
            },
          },
          {
            featureType: "all",
            elementType: "labels.text.fill",
            stylers: {
              color: "#8b8787",
            },
          },
          {
            featureType: "manmade",
            elementType: "geometry",
            stylers: {
              color: "#1b1b1b",
            },
          },
          {
            featureType: "local",
            elementType: "geometry",
            stylers: {
              lightness: -75,
              saturation: -91,
            },
          },
          {
            featureType: "subway",
            elementType: "geometry",
            stylers: {
              lightness: -65,
            },
          },
          {
            featureType: "railway",
            elementType: "all",
            stylers: {
              lightness: -40,
            },
          },
          {
            featureType: "boundary",
            elementType: "geometry",
            stylers: {
              color: "#8b8787",
              weight: "1",
              lightness: -29,
            },
          },
        ],
      },
      listData: [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第二行无缝滚动第二行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第三行无缝滚动第三行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第四行无缝滚动第四行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第五行无缝滚动第五行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第六行无缝滚动第六行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第七行无缝滚动第七行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第八行无缝滚动第八行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第九行无缝滚动第九行",
          date: "2017-12-16",
        },
      ],
    };
  },
  mounted() {
    let _this = this; //声明一个变量指向vue实例this,保证作用域一致
    this.timer = setInterval(function () {
      _this.date = new Date(); //修改数据date
    }, 1000);
  },
  created() {
    // req("/api/sys/auth/homePageData/allNum", "POST", "")
    //   .then((response) => {
    //     this.list = response.data;
    //     this.liftnum1 = this.list[0][0].lift_device_num;
    //     this.liftnum2 = this.list[0][0].lift_use_num;
    //     this.liftnum3 = this.list[0][0].lift_make_num;
    //
    //     this.cokenum1 = this.list[1][0].coke_device_num;
    //     this.cokenum2 = this.list[1][0].coke_use_num;
    //     this.cokenum3 = this.list[1][0].coke_make_num;
    //
    //     this.gasnum1 = this.list[2][0].gas_device_num;
    //     this.gasnum2 = this.list[2][0].gas_use_num;
    //     this.gasnum3 = this.list[2][0].gas_make_num;
    //     console.log(this.list);
    //   })
    //   .catch(() => console.log("page request error"));
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); //在vue实例销毁钱，清除我们的定时器
    }
  },
  computed: {
    ...mapGetters(["equType"]),
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 0, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接

      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    tableRowStyle({ row, rowIndex }) {
      return "background-color: #02152f;color: #fff";
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #2ec7c9;color: #fff;font-weight: 500;";
      }
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return "background:#06134A;color:#0000ff;";
    },
    getPoint(e) {
      //点击地图获取一些信息，
      this.show = true;
      this.postionMap.lng = e.point.lng; //通过  e.point.lng获取经度
      this.postionMap.lat = e.point.lat; //通过  e.point.lat获取纬度
      this.add.jd = e.point.lng;
      this.add.wd = e.point.lat;
      this.zoom = e.target.getZoom();

      let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
      geocoder.getLocation(e.point, (rs) => {
        this.add.site = rs.address;
        //地址描述(string)=
        // console.log(rs.address);    //这里打印可以看到里面的详细地址信息，可以根据需求选择想要的
        // console.log(rs.addressComponents);//结构化的地址描述(object)
        // console.log(rs.addressComponents.province); //省
        // console.log(rs.addressComponents.city); //城市
        // console.log(rs.addressComponents.district); //区县
        // console.log(rs.addressComponents.street); //街道
        // console.log(rs.addressComponents.streetNumber); //门牌号
        // console.log(rs.surroundingPois); //附近的POI点(array)
        // console.log(rs.business); //商圈字段，代表此点所属的商圈(string)
      });
    },
    infoWindowClose() {
      this.show = false;
    },
    infoWindowOpen() {
      //这里有个问题纠结了很久，百度的信息窗口默认有个点击其他地方就消失的事件，我没有找到
      //并且信息窗口点击一次显示，一次消失
      //于是我加了一个100毫秒的定时器，保证每次点击地图都可以展示信息窗口
      setInterval(() => {
        this.show = true;
      }, 100);
    },
    change(e) {
      this.$forceUpdate(); //更新嵌套过深的输入框
    },
    vuetest() {
      test();
    },
    getEquActive(equType) {
      if (equType == this.equType) {
        return "active";
      } else {
        return " ";
      }
    },
    openUrl() {
      window.open("http://139.129.231.153/ahct/index2.aspx", "_blank");
    },
    changeEquType(equType) {
      this.setEquType(equType);
      let message = "已切换为设备：";
      switch (equType) {
        case "qzj":
          message += "起重机械";
          break;
        case "dqkg":
          message += "电器控柜";
          break;
        case "yycg":
          message += "原油储罐";
          break;
        case "jtt":
          message += "焦炭塔";
          break;
        case "dzgl":
          message += "电站锅炉";
          break;
        case "ydqp":
          message += "移动气瓶";
          break;
        default:
          break;
      }
      this.$message({
        message,
        type: "success",
      });
    },
    ...mapMutations({
      setEquType: "SET_EQUTYPE",
    }),
  },
};
</script>

<style lang="scss" scoped>
.img {
  display: flex;
  justify-content: center;
  align-items: center;
  x: 50px;
}

.allbody {
  width: 100%;
  height: 1050px;
  background-image: url("../../../assets/bg.jpg");
}

.headerbackgroud {
  background-image: url("../../../assets/screen-header.jpg");
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(73, 88, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.midText {
  position: absolute;
  left: 50%;
  background-color: #ffffff;
  padding: 0 15px;
  transform: translateX(-50%) translateY(-50%);
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.frameDiv {
  position: relative;
  margin-right: 18px;
  //background:rgba(56,62,88,0.8);
  .frame {
    position: absolute;

    width: 95%;
    height: 95%;

    box-shadow: 0px 0px 9px 0px rgba(82, 255, 226, 0.23) inset;
    background: linear-gradient(to left, #00cda2, #00cda2) left top no-repeat,
      linear-gradient(to bottom, #00cda2, #00cda2) left top no-repeat,
      linear-gradient(to left, #00cda2, #00cda2) right top no-repeat,
      linear-gradient(to bottom, #00cda2, #00cda2) right top no-repeat,
      linear-gradient(to left, #00cda2, #00cda2) left bottom no-repeat,
      linear-gradient(to bottom, #00cda2, #00cda2) left bottom no-repeat,
      linear-gradient(to left, #00cda2, #00cda2) right bottom no-repeat,
      linear-gradient(to left, #00cda2, #00cda2) right bottom no-repeat;
    background-size: 18px 6px, 6px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      margin-top: 5px;
      font-size: 50px;
      font-family: Source Han Sans CN;
      font-weight: 200;
      color: #00cda2;
    }

    .num {
      font-size: 26px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: rgba(0, 205, 162, 1);
    }
  }
}

.frameDiv2 {
  position: relative;
  margin-right: 18px;
  //background:rgba(56,62,88,0.8);
  .frame2 {
    position: absolute;
    // top: -1px;
    // left: -1px;

    width: 98%;
    height: 95%;

    box-shadow: 0px 0px 9px 0px rgba(82, 255, 226, 0.23) inset;
    background: linear-gradient(to left, #00cda2, #00cda2) left top no-repeat,
      linear-gradient(to bottom, #00cda2, #00cda2) left top no-repeat,
      linear-gradient(to left, #00cda2, #00cda2) right top no-repeat,
      linear-gradient(to bottom, #00cda2, #00cda2) right top no-repeat,
      linear-gradient(to left, #00cda2, #00cda2) left bottom no-repeat,
      linear-gradient(to bottom, #00cda2, #00cda2) left bottom no-repeat,
      linear-gradient(to left, #00cda2, #00cda2) right bottom no-repeat,
      linear-gradient(to left, #00cda2, #00cda2) right bottom no-repeat;
    background-size: 18px 6px, 6px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title2 {
      margin-top: 5px;
      font-size: 50px;
      font-family: Source Han Sans CN;
      font-weight: 200;
      color: #00cda2;
    }

    .num2 {
      font-size: 26px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: rgba(0, 205, 162, 1);
    }
  }
}

.frameDiv3 {
  position: relative;
  margin-right: 18px;
  //background:rgba(56,62,88,0.8);
  .frame3 {
    position: absolute;
    // top: -1px;
    // left: -1px;

    width: 98%;
    height: 35%;

    box-shadow: 0px 0px 9px 0px rgba(82, 255, 226, 0.23) inset;
    background: linear-gradient(to left, #00cda2, #00cda2) left top no-repeat,
      linear-gradient(to bottom, #00cda2, #00cda2) left top no-repeat,
      linear-gradient(to left, #00cda2, #00cda2) right top no-repeat,
      linear-gradient(to bottom, #00cda2, #00cda2) right top no-repeat,
      linear-gradient(to left, #00cda2, #00cda2) left bottom no-repeat,
      linear-gradient(to bottom, #00cda2, #00cda2) left bottom no-repeat,
      linear-gradient(to left, #00cda2, #00cda2) right bottom no-repeat,
      linear-gradient(to left, #00cda2, #00cda2) right bottom no-repeat;
    background-size: 18px 6px, 6px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title2 {
      margin-top: 5px;
      font-size: 50px;
      font-family: Source Han Sans CN;
      font-weight: 200;
      color: #00cda2;
    }

    .num2 {
      font-size: 26px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: rgba(0, 205, 162, 1);
    }
  }
}

.panel-group {
  margin-top: 24px;
  margin-left: 5px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 145px;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: #ff00ff;

    .card-img {
      position: relative;
      height: 125px;
      width: 125px;
      margin-left: 20px;
      float: left;
      border: #4ab7bd 3px solid;
      border-radius: 10px;
      z-index: 1;

      // 指针移动上去后边框和文字变色
      &:hover {
        cursor: pointer;
        border: #ffcc00 3px solid;

        .card-img-inf {
          color: #ffcc00;
        }
      }

      .card-img-inf {
        position: relative;
        margin-top: -2px;
        margin-left: 25%;
        font-size: 15px;
        color: #4ab7bd;
      }
    }

    // active状态下一直显示高亮色
    .card-img.active {
      border: #ffcc00 3px solid;

      .card-img-inf {
        color: #ffcc00;
      }
    }

    .card-panel-description {
      position: relative;
      float: right;
      font-weight: bold;
      margin: 16px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: #ffffff;
        font-size: 15px;
        margin-bottom: 14px;
        margin-left: 50px;
      }

      .card-panel-num {
        font-size: 20px;
        color: #4ab7bd;
      }
    }
  }
}

/*.ButtonStyle{*/
/*position:relative;*/

/*.Button{*/
/*position:absolute;*/
/*width: 95%;*/
/*height:95%;*/
/*box-shadow:3px 3px 5px black inset;*/
/*background-color: #009bfe;*/

/*}*/
/*}*/
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  background-color: #111;
  font-size: 10px;
}

body {
  background-image: linear-gradient(
      0deg,
      transparent 24%,
      rgba(32, 255, 77, 0.15) 25%,
      rgba(32, 255, 77, 0.15) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.15) 75%,
      rgba(32, 255, 77, 0.15) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      rgba(32, 255, 77, 0.15) 25%,
      rgba(32, 255, 77, 0.15) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.15) 75%,
      rgba(32, 255, 77, 0.15) 76%,
      transparent 77%,
      transparent
    );
  background-size: 7rem 7rem;
  background-position: -5.2rem -5.2rem;
  width: 50%;
  height: 50%;
  position: relative;
  padding: 0;
  margin: 0;
  font-size: 1.6rem;
}

.lizi {
  position: absolute;
  z-index: 0;
  width: 100%;
}

@keyframes radar-beam {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.seamless-warp {
  height: 229px;
  overflow: hidden;
}

#allmap {
  height: 100%;
  width: 100%;

  position: center;
}

.BMap_cpyCtrl {
  display: none;
}

.anchorBL {
  display: none;
}

#text {
  -webkit-text-fill-color: white;
}

.select {
  color: white;
}

.hello {
  // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
  /deep/ input::-webkit-input-placeholder {
    color: #fff;
  }

  /deep/ input::-moz-input-placeholder {
    color: #fff;
  }

  /deep/ input::-ms-input-placeholder {
    color: #fff;
  }

  //修改的是el-input的样式
  //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
  //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner {
    background-color: unset;
    color: #fff;
    border: 0px;
    border-radius: 0px;
    text-align: center;
  }
}

.map1,
.map2,
.map3 {
  position: absolute;
  opacity: 0.5;
}

.map1 {
  margin-left: 580px;
  margin-top: 230px;
  z-index: 2;
  animation: myfirst2 15s infinite linear;
}

.map2 {
  margin-left: 625px;
  margin-top: 275px;
  z-index: 3;
  opacity: 0.2;
  animation: myfirst 10s infinite linear;
}

.map3 {
  margin-left: 650px;
  margin-top: 300px;
  z-index: 1;
}

@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
</style>
